<template>
	<footer class="footer-fixed">
		<a class="collect js-collect" href="javascript:;" id="ga-room-collect" @click="subscribed">
	        <i class="icon iconfont  js-collect-icon" :class="is_subscribe == 1?'icon-shoucang':'icon-shoucang1'"></i>
	        <span class="txt">{{ txt }}</span>
	    </a>
        <div class="collect" v-if="isUse">
            <div style="padding-left: 5px;">
                <img v-bind:src="atvar" style="width: 44px;float: left;border-radius: 50%;height: 44px;" alt="">
                <span style="font-size: 16px;margin-left: 55px;display: block;padding: 2px 0;">
                    <span style="display: block;" class="ellips">{{name}}</span>
                    <small style="font-size: 12px;color: #999;display: block;">业主</small>
                </span>
            </div>
        </div>
         <a class="items orange contact" id="contact" style="background-color: #4c44e4;" @click="oncustomer" data-group="1">在线问</a>
        <a class="items orange contact" id="contact" @click="getMobile" v-if="isUse">打电话</a>
        <alert :message='message' v-if="openMessage" @closeBtn="closeMessage"></alert>
        <div class="alert-wrap" v-if="openMobile">
			<div class="layer-shade"></div>
		    <div class="layer-main">
		      <div class="layer-section">
			      <div class="layer-child">
			        <h1>提示</h1>
			        <p>{{ getMobileNum }}</p>
			        <div>{{ time }}秒内拨打此电话有效</div>
			        <div class="layer-btn">
			        	<a :href="'tel:'+getMobileNum">拨打</a>
			        </div>
                    <div class="layer-close"  @click="closeBtn"></div>
			      </div>
		    	</div>
		    </div>
		</div>
    </footer>
</template>

<script>
    import alert from './alert'
	export default{
		name:'message',
		props:['atvar','name','mobile','model','modelId','url','isUse','isSet',"isUrl"],
        components:{alert},
		data(){
			return{
				is_subscribe:'',
				txt:'收藏',
				message:'',
				openMessage:false,
				flag:false,
				openMobile:false,
				getMobileNum:'',
				time:0
			}
		},
		created(){
			this.isSubscribe();
		},
		methods:{
			//查看是否已经关注
			isSubscribe(){
				if(localStorage.getItem('token')){
					this.$get('/api/subscribe',{model:this.model,model_id:this.modelId,href:this.url,token:localStorage.getItem('token')}).then(res=>{
						if (res.code == 0) {
							this.is_subscribe = res.data.is_subscribe
							console.log(this.is_subscribe)
							if(this.is_subscribe == 1){
								this.txt = '已收藏'
							}else{
								this.txt = '收藏'
							}
						}
					})
				}
			},
			//点击关注
			subscribed(){
				if (localStorage.getItem('token')) {
					if(this.is_subscribe == 1){
						this.$post('/api/unSubscribe',{model:this.model,model_id:this.modelId,href:this.url,token:localStorage.getItem('token')}).then(res=>{
							if(res.code == 0){
								this.is_subscribe = 0
								this.txt = '收藏'
							}
						})
					}else if(this.is_subscribe == 0){
						this.$post('/api/subscribe',{model:this.model,model_id:this.modelId,href:this.url,token:localStorage.getItem('token')}).then(res=>{
							if(res.code == 0){
								this.is_subscribe = 1
								this.txt = '已收藏'
							}
						})
					}
				}else{
					this.$router.push('/login')
				}
			},
			//点击客服
			oncustomer(){
				window.location.href = this.isUrl;
			},
			closeMessage(){
                this.openMessage = false
                if(this.flag){
                	this.$router.push('/login')           
                }
        },
        closeBtn(){
        	this.time = 0
        	this.openMobile = false
        },
        timer(){
              if(this.time>0){
                this.time--;
                setTimeout(this.timer,1000);
              }else{
                this.time=0;
                this.openMobile = false
              }
            },
        getMobile(){
        	this.$get('/api/bindCall/'+this.mobile).then(res=>{
        		if(res.code == 0){
        			this.getMobileNum = res.data.mobile
        			this.time =60
        			this.openMobile = true
        			this.timer()
        		}else{
        			this.message = '系统繁忙，请稍后再拨'
        			this.openMessage = true
        		}
        	})
        }
		}
	}
</script>

<style scoped>
	.footer-fixed {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 5px;
    background-color: #fff;
    -webkit-box-shadow: 0 -2px 2px hsla(0,0%,78%,.3);
    box-shadow: 0 -2px 2px hsla(0,0%,78%,.3);
}
.footer-fixed .collect{
    width: 110px;
    height: 44px;
}
.footer-fixed .collect.js-collect{
	padding-left: 0px;
	width: 50px;
	height: 44px;
	text-align: center;
}
.footer-fixed .collect .txt{
	display: block;
	color: #333;
}

.footer-fixed .items {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: block;
    margin: 0 5px;
    padding: 12px 15px;
    font-size: 16px;
    color: #fff;
    line-height: 1.2;
    text-align: center;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.footer-fixed .orange{
    background-color: #e62129;
}
.layer-shade{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0,0,0,0.7);
  }
  .layer-main{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: table;
    z-index: 1001;
  }
  .layer-section{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .layer-child{
    position: relative;
    display: inline-block;
    width: 90%;
    max-width: 640%;
    background-color: #fff;
    border-radius: 5px;
    font-size: 14px;
    padding-bottom: 20px;
  }
  .layer-close{
    position: absolute;
    top: 15px;
    right: 15px;
    width: 16px;
    height: 16px;
    background:url(../../assets/images/close.png) 0 0 no-repeat; 
    background-size: 16px 16px;
  }
  .layer-child h1{
    font-size: 18px;
    padding: 15px 0;
  }
  .layer-child p{
  	padding-top: 10px;
  	color: #e62129;
  }
  .layer-child div{
    padding: 10px 0;
  }
  .layer-child .layer-btn a{
    display: inline-block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    background-color: #e62129;
    border-radius: 5px;
    color: #fff;
  }
</style>